import L from "leaflet";
import * as turf from "@turf/turf";
import "leaflet-polylinedecorator";
import "leaflet-rotatedmarker";

let trackLine,trackMarker,intervalId;
export const eventEmitter = new EventTarget();

export function loadMapTrack(trackList,option,map){
  const coordinates = trackList.map(v=>[v.lng,v.lat]);
  const { startIconUrl,endIconUrl,markerIconUrl,weight } = option;
  const startIcon = L.icon({  
    iconUrl: startIconUrl,
    iconSize: new L.Point(25, 32),
  });
  const endIcon = L.icon({
    iconUrl: endIconUrl,
    iconSize: new L.Point(25, 32),
  });
  const markerIcon = L.icon({
    iconUrl: markerIconUrl,
    iconSize: new L.Point(24, 32),
  });    
  L.marker(trackList[0],{icon: startIcon}).addTo(map);
  L.marker(trackList[trackList.length-1],{icon: endIcon}).addTo(map);  
  map.setView(trackList[0], 18);
  L.polyline(trackList, {
    weight: weight || 4,
    color: "#FB7B01",
    opacity: 1
  }).addTo(map);
  
  trackLine = new L.polyline([], {
    weight: weight,
    color: "#0FE217",
    opacity: 1
  }).addTo(map);  
  trackMarker = L.marker(trackList[0],{icon: markerIcon}).addTo(map);
  changeCarRotate(trackMarker,coordinates,1);
}

export function loadMapRealTrack(trackList,location=false,option,map){
  const coordinates = trackList.map(v=>[v.lng,v.lat]);
  const { startIconUrl,markerIconUrl,weight } = option;
  const startIcon = L.icon({  
    iconUrl: startIconUrl,
    iconSize: new L.Point(25, 32),
  });
  const markerIcon = L.icon({
    iconUrl: markerIconUrl,
    iconSize: new L.Point(24, 32),
  });   
  L.marker(trackList[0],{icon: startIcon}).addTo(map);
  trackLine = new L.polyline(trackList, {
    weight: weight || 4,
    color: "#0FE217",
    opacity: 1
  }).addTo(map);
  if (location) {
    map.setView(trackList[trackList.length-1],18);
  }  
  trackMarker = L.marker(trackList[trackList.length-1],{icon: markerIcon}).addTo(map);
  changeCarRotate(trackMarker,coordinates,coordinates.length-1);
}

export function trackLineList(dataList,location,map) {
  const coordinates = dataList.map(v=>[v.lng,v.lat]);
  trackLine.setLatLngs(dataList);
  trackMarker.setLatLng(dataList[dataList.length-1]);
  if (location) {
    map.panTo(dataList[dataList.length-1],{animate:true});
  }
  changeCarRotate(trackMarker,coordinates,coordinates.length-1);
}

export function handleTrackStart(dataList,index,speed){  
  const coordinates = dataList.map(v=>[v.lng,v.lat]);
  if (intervalId) {
    clearInterval(intervalId);
    intervalId = null;
  }  
  if (index == dataList.length-1) {
    index = 0;       
  }
  trackLine.setLatLngs(dataList.slice(0,index+1));
  trackMarker.setLatLng(dataList[index]);
  if (index!==0) {           
    changeCarRotate(trackMarker,coordinates,index);
  }else{
    changeCarRotate(trackMarker,coordinates,1);
  }
  const event = new CustomEvent('valueChanged', { detail: index });
  eventEmitter.dispatchEvent(event);
  intervalId = setInterval(() => {
    if (index < dataList.length) {
      trackLine.setLatLngs(dataList.slice(0,index+1));
      trackMarker.setLatLng(dataList[index]);
      if (index!==0) {           
        changeCarRotate(trackMarker,coordinates,index);
      }else{
        changeCarRotate(trackMarker,coordinates,1);
      }
      const event = new CustomEvent('valueChanged', { detail: index });
      eventEmitter.dispatchEvent(event);
      index+=1;      
    }else{
      clearInterval(intervalId);
      intervalId = null;
    }         
  }, speed);
}

export function handleTrackPause(){
  if (intervalId) {
    clearInterval(intervalId);
    intervalId = null;
  }      
}

export function handleSpeed(dataList,index,speed){
  if (intervalId) {
    handleTrackStart(dataList,index,speed);
  }
}

export function setProgress(dataList,index,speed){
  const coordinates = dataList.map(v=>[v.lng,v.lat]);
  if (intervalId) {
    handleTrackStart(dataList,index,speed);
  }else{
    handleTrackPause();
    trackLine.setLatLngs(dataList.slice(0,index+1));
    trackMarker.setLatLng(dataList[index]);
    const event = new CustomEvent('valueChanged', { detail: index });
    eventEmitter.dispatchEvent(event);
    if (index!==0) {           
      changeCarRotate(trackMarker,coordinates,index);
    }else{
      changeCarRotate(trackMarker,coordinates,1);
    }   
  }             
}

function changeCarRotate(trackMarker,coordinates,index){
  const direction = turf.bearing(coordinates[index-1], coordinates[index]);
  trackMarker.setRotationAngle(direction/2);
  trackMarker.setRotationOrigin("center"); 
}